<template>
  <div>
    <el-scrollbar>
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <template v-for="(item, index) in menus" :key="index">
          <template v-if="item.children && item.children.length > 0">
            <!-- 渲染一级菜单（带子菜单）-->
            <el-sub-menu :index="item.permId">
              <template #title>
                <!-- 为一级菜单添加图标 -->
                <span>
                  <el-icon style="margin-right: 5px;">
                    <component is="Menu" />
                  </el-icon>
                  <span style="font-weight: 900;">{{ item.permRemark }}</span>
                </span>
              </template>
              <!-- 二级菜单 -->
              <template v-for="(child, childIndex) in item.children" :key="childIndex">
                <template v-if="child.children && child.children.length > 0">
                  <!-- 如果有三级菜单 -->
                  <el-sub-menu :index="child.permId">
                    <template #title>
                      <span style="">{{ child.permRemark }}</span>
                    </template>
                    <!-- 三级菜单渲染 -->
                    <el-menu-item v-for="(grandChild, grandChildIndex) in child.children" :key="grandChildIndex"
                      :index="grandChild.permId" @click="handleMenuClick(grandChild.permUrl)">
                      {{ grandChild.permRemark }}
                    </el-menu-item>
                  </el-sub-menu>
                </template>
                <template v-else>
                  <!-- 如果是普通二级菜单 -->
                  <el-menu-item :index="child.permId" @click="handleMenuClick(child.permUrl)">
                    {{ child.permRemark }}
                  </el-menu-item>
                </template>
              </template>
            </el-sub-menu>
          </template>
          <template v-else>
            <!-- 渲染一级菜单（无子菜单） -->
            <el-menu-item :index="item.permId" @click="handleMenuClick(item.permUrl)">
              {{ item.permRemark }}
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import router from '@/router';
import { getMenuListApi } from '@/api/api';

const menus = ref<any[]>([]);

// 处理菜单点击事件
const handleMenuClick = (url: string | null) => {
  if (url) {
    router.push(url);
  }
};


// 获取菜单列表
async function getMenu() {
  try {
    const response = await getMenuListApi();
    console.log('获取菜单列表结果', response);
    if (response.code === 200) {
      menus.value = response.data;
    }
  } catch (error) {
    console.error('获取菜单失败:', error);
  }
}

onMounted(() => {
  getMenu();
});

// 控制菜单的打开与关闭
const handleOpen = (index: string) => {
  console.log('展开菜单:', index);
};

const handleClose = (index: string) => {
  console.log('关闭菜单:', index);
};
</script>

<style scoped>
/* 默认背景色为白色，默认文字颜色 */
.el-menu-vertical-demo {
  background-color: #ffffff;
  color: #606266;
}

/* 菜单悬停或点击时：背景色蓝色，文字为白色 */
.el-menu .el-menu-item:focus,
.el-menu .el-menu-item:hover,
.el-menu .el-sub-menu__title:focus,
/* .el-menu .el-sub-menu__title:hover {
  color: #409eff;
  background-color: gainsboro;
} */

/* 菜单激活项：背景色蓝色，文字为白色 */
.el-menu .el-menu-item.is-active {
  color: #409eff;
  background-color: white;
}
</style>
